<template>
  <div class="signup">
    <i
      class="iconfont icon-blt_fangxiang_zuo_fanhui"
      style="
        position: absolute;
        top: 0.4rem;
        left: 0.2rem;
        font-size: 0.4rem;
        color: white;
      "
      @click="returned()"
    ></i>
    <img src="/favicon.ico" alt="" />
    <div class="bottom">
      <div class="input">
        <input
          @blur="tel()"
          v-model="value"
          type="text"
          placeholder="请输入手机号"
        /><br />
        <span ref="tel" style="display: none">格式错误,请重新输入</span>
      </div>
      <div class="input">
        <input
          @blur="userspwd()"
          v-model="userspwd1"
          type="password"
          placeholder="请输入密码"
        /><br />
        <span ref="userspwd1" style="display: none">密码至少六位</span>
      </div>
      <div class="input">
        <input
          @blur="pwdreg()"
          v-model="userspwd2"
          type="password"
          placeholder="确认密码"
        /><br />
        <span ref="userspwd2" style="display: none">两次密码必须一致</span>
      </div>
      <button @click="reg()">一键登录</button>
    </div>
  </div>
</template>
<script>
// import { getdata } from "@/api/getlink";
import { postdata } from "@/api/postapi.js";
export default {
  data() {
    return {
      value: "",
      userspwd1: "",
      userspwd2: "",
    };
  },
  created() {},
  computed: {},
  methods: {
    returned() {
      this.$router.go(-1);
    },
    reg() {
      // getdata("/api/unique", {
      //   tel: this.value,
      //   userpwd: this.userspwd1,
      // }).then((ok) => {
      //   console.log(ok);
      // });
      // window.location.href = "http://localhost:8888/ ";

      let usp = new URLSearchParams();
      usp.append("tel", this.value);
      usp.append("userpwd", this.userspwd1);
      postdata("/proxy/user", usp).then((ok) => {
        console.log(ok);
        // window.location.href = "localhost:8888";
      });
    },
    tel() {
      let reg = /^1\d{10}$/;
      if (reg.test(this.value)) {
        this.$refs.tel.style.display = "none";
      } else {
        this.$refs.tel.style.display = "block";
      }
    },
    userspwd() {
      let pwdreg = /^.{6}$/;
      if (pwdreg.test(this.userspwd1)) {
        this.$refs.userspwd1.style.display = "none";
      } else {
        this.$refs.userspwd1.style.display = "block";
      }
      if (this.userspwd1 === this.userspwd2 && pwdreg.test(this.userspwd1)) {
        this.$refs.userspwd2.style.display = "none";
        this.$refs.userspwd1.style.display = "none";
      }
    },
    pwdreg() {
      if (this.userspwd1 === this.userspwd2) {
        this.$refs.userspwd2.style.display = "none";
      } else {
        this.$refs.userspwd2.style.display = "block";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.signup {
  position: relative;
  padding: 2.5rem 0 0;
  background-color: #dc2b21;
  height: 100%;
  img {
    margin: 0 auto 4rem;
    width: 1.4rem;
    height: 1.4rem;
  }
  .bottom {
    width: 100%;
    text-align: center;
    .input {
      height: 1.2rem;
    }
    input {
      width: 5.4rem;
      height: 0.8rem;
      border-radius: 0.32rem;
      border: 0.01rem solid #b67169;
      padding: 0.15rem 0.3rem;
      font-size: 0.3rem;
    }
    span {
      font-size: 0.26rem;
      color: #fff;
    }
    button {
      width: 5.4rem;
      height: 0.8rem;
      border-radius: 0.32rem;
      border: 0.01rem solid #b67169;
      padding: 0.15rem 0.3rem;
      font-size: 0.3rem;
      color: #d83632;
      font-weight: 700;
    }
  }
}
</style>
